<template>
  <view class="container">
    <!-- 标题部分 -->
    <view class="container-title">
      <view style="position: relative; width: max-content">
        <view class="title-name">
          <text>{{ item.name }}</text>
        </view>
        <view
          class="title-name_bg"
          :style="{
            background: `linear-gradient(90deg, #F3A224 0%, rgba(243, 162, 36, 0.00) 100%)`,
          }"
        ></view>
      </view>
      <view
        v-if="item.styleType === StoreHomeRecommendStyleTypeEnum.HORIZONTAL && isMaxLength"
        class="see-more"
        @click="handleSeeMore"
      >
        <view class="see-more-text">
          <text>查看更多</text>
        </view>
        <view class="ali-icon icon-you1"></view>
      </view>
    </view>
    <template v-if="item.styleType === StoreHomeRecommendStyleTypeEnum.HORIZONTAL">
      <GoodsHorizontal :list="item.productCommonListVoList" />
    </template>
    <template v-if="item.styleType === StoreHomeRecommendStyleTypeEnum.VERTICAL">
      <GoodsVertical :list="item.productCommonListVoList" />
      <view
        v-if="isMaxLength"
        class="see-more"
        style="margin-top: 16rpx; padding-bottom: 32rpx"
        @click="handleSeeMore"
      >
        <view class="see-more-text">
          <text>查看更多</text>
        </view>
        <view class="ali-icon icon-you1"></view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType } from 'vue';
  import GoodsHorizontal from './PublicGoodsItem/GoodsHorizontal.vue';
  import GoodsVertical from './PublicGoodsItem/GoodsVertical.vue';
  import { isArrayString } from '@/utils/is';
  import { StoreHomeLinkTypeEnum, StoreHomeRecommendStyleTypeEnum } from '@/enums/productEnum';
  import type { GetHomeRecommendPageResult } from '@/api/mall/types';

  const props = defineProps({
    item: {
      type: Object as PropType<GetHomeRecommendPageResult>,
      required: true,
    },
  });

  const emit = defineEmits(['handleSeeMore']);

  const maxNum = 8;
  const isMaxLength = computed(() => {
    const item = props.item;
    if (item.typeOptionsId === StoreHomeLinkTypeEnum.PRODUCT_CATEGORY) {
      if (item.productCommonListVoList?.length >= maxNum) return true;
    }
    if (item.typeOptionsId === StoreHomeLinkTypeEnum.PRODUCT_LIST) {
      if (item && isArrayString(item.optionsId)) {
        return JSON.parse(item.optionsId).length > maxNum;
      }
    }

    return false;
  });

  const handleSeeMore = () => {
    emit('handleSeeMore');
  };
</script>
<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    &-title {
      padding: 0 32rpx;
      padding-top: 24rpx;
      padding-bottom: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-name {
        font-weight: bolder;
        position: relative;
        z-index: 1;
        font-size: 36rpx;
      }
      .title-name_bg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 16rpx;
      }
    }
    .see-more {
      display: flex;
      align-items: center;
      justify-content: center;
      &-text {
        color: #666664;
        font-size: 24rpx;
      }
      .ali-icon {
        color: #666664;
        font-size: 36rpx;
      }
    }
  }
</style>
